<template>
  <div>
    <el-row :gutter="10">
      <el-input v-model="input" placeholder="请输入用户名" clearable></el-input>
    </el-row>
    <el-row :gutter="10">
      <el-input
        v-model="input"
        placeholder="请输入密码"
        clearable
        type="password"
        show-password
      ></el-input>
    </el-row>
    <el-row :gutter="10">
      <el-input
        v-model="input"
        type="textarea"
        placeholder="placeholder"
        :autosize="{ minRows: 3, maxRows: 6 }"
        :maxlength="500"
        show-word-limit
      ></el-input>
    </el-row>

    <el-row :gutter="10">
      <el-input v-model="input" placeholder="普通"></el-input>
      <el-input v-model="input" placeholder="medium" size="medium"></el-input>
      <el-input v-model="input" placeholder="small" size="small"></el-input>
      <el-input v-model="input" placeholder="mini" size="mini"></el-input>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input
          v-model="input"
          placeholder="请输入日程安排"
          suffix-icon="el-icon-date"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="input"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
        ></el-input>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model="input" placeholder="请输入日程安排"
          ><i slot="suffix" class="el-icon-date el-input__icon"></i
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="input" placeholder="请输入搜索内容"
          ><i slot="prefix" class="el-icon-search el-input__icon"></i
        ></el-input>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model="input" placeholder="请输入内容">
          <template slot="prepend">https://</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="input" placeholder="请输入内容">
          <template slot="append">.com</template>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Input",
  data() {
    return {
      input: "",
    };
  },
};
</script>

<style>
</style>